<template>
  <div id="app">
    <!-- button -->
    <div class="row">
      <am-button>slot</am-button>
      <am-button plain type="success">plain</am-button>
      <am-button round type="info">round</am-button>
      <am-button circle type="warning">circle</am-button>
      <am-button icon="am-icon-guanbi" type="danger" disabled>disabled</am-button>
      <am-button icon="am-icon-huanyipi" type="primary" @click="visible = true">show dialog</am-button>
    </div>
    <!-- dialog -->
    <div class="row">
      <am-dialog
        :title="'this is title'"
        :width="'40vw'"
        :top="'20vh'"
        :visible.sync="visible"
      >
        <!-- :visible.sync相当于 :visible="visible" @update:visible="visible=false"
      在am-dialog中已经this.$emit('update:visible', false) -->
        <span>this is content</span>
        <span slot="title" class="dialog-footer">
          <i>this is slot title</i>
        </span>
        <span slot="footer" class="dialog-footer">
          <am-button type="primary" @click="visible = false">确 定</am-button>
          <am-button type="default" @click="visible = false">取 消</am-button>
        </span>
      </am-dialog>
    </div>
    <am-form :model="form" labelWidth="100px">
      <am-form-item label="input">
        <!-- v-model="username" 相当于 :value="username" @input="username=xxx"
        所以子组件需要接收value及emit input事件-->
        <am-input
          placeholder="请输入"
          type="text"
          v-model="form.username"
          clearable
        ></am-input>
        <am-input
          placeholder="请输入"
          type="password"
          v-model="form.password"
          showPassword
        ></am-input>
      </am-form-item>
      <am-form-item label="switch">
        <am-switch
          v-model="form.switchValue"
          active-color="red"
          name="aaaa"
        ></am-switch>
      </am-form-item>
      <am-form-item label="radio">
        <am-radio label="猫" v-model="form.animalRadio"></am-radio>
        <am-radio label="狗" v-model="form.animalRadio"></am-radio>
        <am-radio-group v-model="form.genderRadio">
          <am-radio label="1">男</am-radio>
          <am-radio label="0">女</am-radio>
        </am-radio-group>
      </am-form-item>
      <am-form-item label="checkbox">
        <am-checkbox v-model="form.isChecked">是否选中</am-checkbox>
        <am-checkbox-group v-model="form.checkedMan">
          <am-checkbox label="2">二号</am-checkbox>
          <am-checkbox label="3">三号</am-checkbox>
          <am-checkbox label="4">四号</am-checkbox>
        </am-checkbox-group>
        </am-form-item>
    </am-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data () {
    return {
      visible: false,
      form: {
        username: 'abc',
        password: '12',
        switchValue: false,
        genderRadio: '1',
        animalRadio: '狗',
        isChecked: true,
        checkedMan: ['2', '3']
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss">
#app {
  .row {
    .am-button {
      margin: 10px 10px;
    }
  }
}
</style>
